@color_blue: #43D7B5;
@color_icon: #aaa;
page {
  background-color: var(--colorGray);
  .dialog-wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 3;
    // background-color: #00000038;
    // background-color: #ddd;
    .dialog {
      width: 100%;
      // background-color: #fff;
      position: fixed;
      left: 0;
      top: 0rpx;
      // transform: translateY(-50%);
      // transition: bottom 0.5s;
      // border-top-left-radius: 20rpx;
      // border-top-right-radius: 20rpx;
      border-radius: 20rpx;
      // overflow: auto;

      &.active {
        bottom: 0;
      }
      .up {
        padding: 21rpx 35rpx;
        line-height: 60rpx;
        color: #666;
        font-size: 34rpx;
        position: relative;
        top: 200rpx;
        text-align: center;
        .headPic {
          width: 83rpx;
          height: 83rpx;
          border-radius: 15rpx;
          float: left;
          vertical-align: middle;
          background-size: 100% 100%;
        }
        .up-right{
          float: right;
          height: 83rpx;
          width: 580rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-size: (750rpx * 45 / 1070);
            font-weight: bold;
            float: left;
            vertical-align: middle;
          }
          .reNew {
            width: 50rpx;
            height: 50rpx;
            float: right;
            margin-right: 15rpx;
            vertical-align: middle;
            transition: transform 0.5s;
          }
          .change {
            float: right;
            position: absolute;
            right: 120rpx;
            color: #aaa;
          }
        }
      }
      .center {
        padding: 20rpx 0;
        // background-color: var(--colorGray);
        position: relative;
        top: 200rpx;
        display: flex;
        flex-wrap: wrap;
        .item-wrap {
          flex: 0 0 33.33%;
          height: 100rpx;
          display: flex;
          justify-content: center;
          // padding-left: 45rpx;
          align-items: center;
          .item {
            padding: 0 20rpx;
            width: 160rpx;
            height: 48rpx;
            text-align: center;
            line-height: 42rpx;
            border: 1px solid #999;
            color: @color_blue;
            color: #999;
            border-radius: 30rpx; 
          }
          // &:nth-child(n+7) {
          //   margin-top: 20rpx;
          // }
        }
      }
      .blank {
        height: 15rpx;
        background-color: #e6e6e6;
      }
      .bottom {
        color: @color_icon;
        height: 110rpx;
        line-height: 110rpx;
        text-align: center;
        font-size: 34rpx;
      }
    }
  }
}